<ion-header>
    <ion-toolbar>
        <img class="back_img" src="..\assets\img\返回.png" slot="start" (click)="goBack()">
        <ion-title>添加实验</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card>
        <ion-list>
            <ion-item>
                <ion-label>实验名称:</ion-label>
                <ion-input [(ngModel)]="workInfo.name" name='name' id="name" required #name="ngModel" placeholder="必填">
                </ion-input>
                <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert-danger">
                    <div *ngIf="name.errors.required">
                        必填
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <ion-label>抽题策略:</ion-label>
                <!-- <ion-select slot="end" [(ngModel)]="workInfo.drawPlotId" id="tacticsList" name="tacticsList" required #tacticsList="ngModel" placeholder="必填">
                    <ion-select-option *ngFor="let item of workInfo.tacticsList" [value]="item.name">
                        {{item.name}}</ion-select-option>
                </ion-select>
                <div *ngIf="tacticsList.invalid && (tacticsList.dirty || tacticsList.touched)" class="alert-danger">
                    <div *ngIf="tacticsList.errors.required">
                        必填
                    </div>
                </div> -->
                <ion-select slot="end" [(ngModel)]="drawPlotId" id="tacticsList" name="tacticsList" required #tacticsList="ngModel">
                    <ion-select-option *ngFor="let item of drawPlotinfo" [value]="item.id">
                        {{item.name}}
                    </ion-select-option>
                </ion-select>
                <div *ngIf="tacticsList.invalid && (tacticsList.dirty || tacticsList.touched)" class="alert-danger">
                    <div *ngIf="tacticsList.errors.required">
                        必填
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <ion-label>开始时间：</ion-label>
                <ion-datetime display-format="YYYY-MM-DD" id="startTime" name="startTime" required #startTime="ngModel" placeholder="必填" picker-format="YYYY MM DD" [(ngModel)]="workInfo.startTime" (ionChange)="datetimeChange($event)">
                </ion-datetime>
                <div *ngIf="startTime.invalid && (startTime.dirty || startTime.touched)" class="alert-danger">
                    <div *ngIf="startTime.errors.required">
                        必填
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <ion-label>结束时间：</ion-label>
                <ion-datetime display-format="YYYY-MM-DD" name="endTime" required #endTime="ngModel" placeholder="必填" picker-format="YYYY MM DD" [(ngModel)]="workInfo.endTime" (ionChange)="datetimeChange($event)">
                </ion-datetime>
                <div *ngIf="endTime.invalid && (endTime.dirty || endTime.touched)" class="alert-danger">
                    <div *ngIf="endTime.errors.required">
                        必填
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <ion-label>说 明：</ion-label>
                <ion-textarea [(ngModel)]="workInfo.memo" name="explain"></ion-textarea>
            </ion-item>
            <!-- <ion-item *ngIf="workInfo.enableMutualJudge">
                <ion-label>互评截止时间：</ion-label>
                <ion-datetime display-format="YYYY-MM-DD" [(pickerOptions)]="workInfo.customPickerOptions" name="falgTime" picker-format="YYYY MM DD" [(ngModel)]="workInfo.mutualJudgeEndTime" (ionChange)="datetimeChange($event)">
                </ion-datetime>
            </ion-item> -->

            <ion-item>
                <ion-label>总分：</ion-label>
                <ion-input [(ngModel)]="workInfo.setScore" name="score" id="score" required #score="ngModel" placeholder="必填"></ion-input>
                <div *ngIf="score.invalid && (score.dirty || score.touched)" class="alert-danger">
                    <div *ngIf="score.errors.required">
                        必填
                    </div>
                </div>
            </ion-item>

            <ion-item>
                <ion-label>成绩展示：</ion-label>
                <ion-toggle slot="end" [(ngModel)]="isscoreAppear" name="scoreAppear"></ion-toggle>
            </ion-item>

            <ion-item-divider>
                <ion-label>参数：</ion-label>
            </ion-item-divider>
            <ion-item>
                <ion-checkbox slot="start" [(ngModel)]="workInfo.enableClientJudge"></ion-checkbox>
                <ion-label>开启学生端阅卷</ion-label>
            </ion-item>
            <ion-item *ngIf="workInfo.enableClientJudge"> 
                <ion-checkbox slot="start" [(ngModel)]="workInfo.keyVisible"></ion-checkbox>
                <ion-label>学生端阅卷后标准答案可见</ion-label>
            </ion-item>
            <ion-item>
                <ion-checkbox slot="start" [(ngModel)]="workInfo.viewOneWithAnswerKey"></ion-checkbox>
                <ion-label> 查卷时标准答案可见</ion-label>
            </ion-item>
            <ion-item>
                <ion-checkbox slot="start" [(ngModel)]="workInfo.forbiddenCopy"></ion-checkbox>
                <ion-label>禁止复制题目</ion-label>
            </ion-item>
            <ion-item>
                <ion-checkbox slot="start" [(ngModel)]="workInfo.forbiddenMouseRightMenu"></ion-checkbox>
                <ion-label>禁止右键</ion-label>
            </ion-item>
        </ion-list>
        <br>
        <ion-button expand="block" (click)='signUp()' class="submit_btn">提交</ion-button>
    </ion-card>
</ion-content>